<template>
  <view
    class="content-box"
    ref="box"
    v-bind="$attrs"
    id="textMore"
    :style="{
      color: '#fff',
      fontSize: size + 'rpx',
    }"
  >
    <text
      :style="{ color: '#fff', fontSize: size + 'rpx' }"
      v-if="!isShowMore"
      >{{ text }}</text
    >
    <fui-overflow-hidden
      :rows="2"
      :text="text"
      v-else
      size="26"
      :color="textColor"
    ></fui-overflow-hidden>
  </view>
  <view>
    <text
      :style="{ color: textColor, textAlign: 'right' }"
      class="more"
      @click="isShowMore = !isShowMore"
      v-if="contentHeight > 50"
    >
      <!--      {{ isShowMore ? t('my.seeMore') : t('my.PutAway') }}-->

      {{ isShowMore ? "See more" : "Put Away" }}
    </text>
  </view>
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from "vue";
import FuiOverflowHidden from "@/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue";
import { onHide } from "@dcloudio/uni-app";

onHide(() => {
  isSet.value = true;
});

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  rows: {
    type: Number,
    default: 2,
  },
  textColor: {
    type: String,
    default: "$vice-subject-color",
  },
  size: {
    type: Number,
    default: 26,
  },
  th: {
    type: Number,
    default: 60,
  },
});
const isSet = ref(false);
const contentHeight = ref(0);
const isShowMore = ref(false);
const dom = uni.requireNativePlugin("dom");
const box = ref();

let a = 0;
const setHeight = () => {
  const result = dom.getComponentRect(box.value, (option) => {
    contentHeight.value = option.size.height;
    // console.log("contentHeight.value",contentHeight.value,option,props.text)
    if (isSet.value) return;
    if (contentHeight.value == 0) {
      a += 1;
      setHeight();
    }
    isShowMore.value = contentHeight.value > 50;
    // console.log("加载完成",contentHeight.value)
  });
};
defineExpose({
  setHeight,
});
onMounted(() => {
  // const result = dom.getComponentRect(box,)
  isSet.value = false;
  setTimeout(() => {
    setHeight();
  }, 100);

  console.log("4422", props);
  // nextTick(() => {
  //   uni
  //     .createSelectorQuery()
  //     .select('.content-box')
  //     .boundingClientRect((data) => {
  //       contentHeight.value = data.height
  //       console.log(333, contentHeight.value)
  //       isShowMore.value = contentHeight.value > 50
  //     })
  //     .exec()
  // })
});
</script>
<style lang="scss" scoped>
.content-box {
  font-size: 26rpx;
  line-height: 1.5;
  color: $vice-subject-color;
}

.more {
  // margin-left: auto;
  font-size: 14px;
  // 文本下划线
  text-decoration: underline;
  color: $vice-subject-color;
}
</style>
